<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            border: 1px dotted blue;
            margin: 0 auto;
        }
        #inner{
            width: 20px;
            height: 20px;
            background-color: yellow;
        }
        .box1{
            transform:translate(10px);
            -moz-transform:translate(10px) ;
            -webkit-transform:translate(10px) ;
            -ms-transform:translate(10px);
        }
        .box2{
            transform:translate(20px);
            -moz-transform:translate(20px) ;
            -webkit-transform:translate(20px) ;
            -ms-transform:translate(20px);
        }
        .box3{
            transform:translate(20px, 10px);
            -moz-transform:translate(20px ,10px) ;
            -webkit-transform:translate(20px, 10px) ;
            -ms-transform:translate(20px ,10px);
        }
        .box4{
            transform:translate(20px, 20px);
            -moz-transform:translate(20px, 20px) ;
            -webkit-transform:translate(20px, 20px) ;
            -ms-transform:translate(20px, 20px);
        }
        .box5{
            transform:translate(50px, 50px);
            -moz-transform:translate(50px ,50px) ;
            -webkit-transform:translate(50px, 50px) ;
            -ms-transform:translate(50px ,50px);
        }
        .box6{
            transform:translate(100px ,100px);
            -moz-transform:translate(100px, 100px) ;
            -webkit-transform:translate(100px ,100px) ;
            -ms-transform:translate(100px, 100px);
        }
        .box7{
            transform:translate(-25px, -25px);
            -moz-transform:translate(-25px, -25px) ;
            -webkit-transform:translate(-25px, -25px) ;
            -ms-transform:translate(-25px, -25px);
        }
        .box8{
            transform:translate(0);
            -moz-transform:translate(0) ;
            -webkit-transform:translate(0) ;
            -ms-transform:translate(0);
        }
    </style>
</head>
<body>
<div id="box">
    <div id="inner"></div>
</div>
<form>
    <input type="radio" name="move" onclick="fn1()"/>translate(10px)<br />
    <input type="radio" name="move" onclick="fn2()"/>translate(20px)<br />
    <input type="radio" name="move" onclick="fn3()"/>translate(20px 10px)<br />
    <input type="radio" name="move" onclick="fn4()"/>translate(20px 20px)<br />
    <input type="radio" name="move" onclick="fn5()"/>translate(50px 50px)<br />
    <input type="radio" name="move" onclick="fn6()"/>translate(100px 100px)<br />
    <input type="radio" name="move" onclick="fn7()"/>translate(-25px -25px)<br />
    <input type="radio" name="move" onclick="fn8()"/>translate(none)
</form>
<script>
    function fn1(){
        var img=document.getElementById("inner");
        img.className="box1";
    }
    function fn2(){
        var img=document.getElementById("inner");
        img.className="box2";
    }
    function fn3(){
        var img=document.getElementById("inner");
        img.className="box3";
    }
    function fn4(){
        var img=document.getElementById("inner");
        img.className="box4";
    }
    function fn5(){
        var img=document.getElementById("inner");
        img.className="box5";
    }
    function fn6(){
        var img=document.getElementById("inner");
        img.className="box6";
    }
    function fn7(){
        var img=document.getElementById("inner");
        img.className="box7";
    }
    function fn8(){
        var img=document.getElementById("inner");
        img.className="box8";
    }
</script>
</body>
</html>